﻿<form class="form-horizontal" ng-submit="compare(app)">
    <fieldset>

        <!-- Form Name -->
        <legend>Compare Applicants</legend>

        <!-- Select Basic -->
        <div class="form-group">
            <label class="control-label" for="">Vacancy ID:</label>
            <div class="controls">
                <select id="" name="" class="form-control input-md" ng-model="item" ng-change="list2()">
                    <option ng-repeat="vacancy in vacancys" value="{{vacancy.vacancy_id}}">{{vacancy.vacancy_id}} - {{vacancy.vacancy_for}}
                    </option>
                </select>
            </div>
        </div>

        <!-- Select Multiple -->
        <div class="form-group">
            <label class="control-label" for="">Applicants:</label>
            <div class="controls">
                <select id="Select1" name="" class="form-control input-md" multiple="multiple" ng-model="app" size=8>
                    <option ng-repeat="applicant in applicants" value="{{applicant.id}}">{{applicant.firstName}} {{applicant.lastName}}
                    </option>
                </select>
            </div>
        </div>

        <!-- Button -->
        <div class="control-group">
            <label class="control-label" for=""></label>
            <div class="controls">
                <button id="Button1" name="" class="btn btn-success" type="submit" ng-disabled="app.length!=2">Compare</button>
            </div>
        </div>

    </fieldset>
</form>

<br />


<form ng-hide="!compobjects.length">
    <h3>Applicant Comparison</h3>
    <div class="container">
        <div class="row">
            <div class="span12">
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="text-align:left">
                                <img alt="User Pic" src="{{compobjects[0].pictureURL}}" class="img-circle"><img ng-hide="compobjects[0].total < compobjects[1].total" src="../img/Ok-icon.png" /><br />
                                {{compobjects[0].firstName}} {{compobjects[0].lastName}}
                            </th>
                            <th style="text-align:left">
                                <img alt="User Pic" src="{{compobjects[1].pictureURL}}" class="img-circle"><img ng-hide="compobjects[1].total < compobjects[0].total" src="../img/Ok-icon.png" /><br />
                                {{compobjects[1].firstName}} {{compobjects[1].lastName}}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Reccomandations</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].recommandationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].recommandationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].recommandationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].recommandationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].recommandationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].recommandationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].recommandationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].recommandationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Experience</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].experienceIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].experienceIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].experienceIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].experienceIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].experienceIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].experienceIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].experienceIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].experienceIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Education</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].educationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].educationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].educationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].educationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].educationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].educationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].educationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].educationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Eligibility</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].eligibleIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].eligibleIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].eligibleIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].eligibleIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].eligibleIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].eligibleIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].eligibleIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].eligibleIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Location</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].locationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].locationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].locationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].locationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].locationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].locationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].locationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].locationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].ageIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].ageIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].ageIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].ageIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].ageIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].ageIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].ageIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].ageIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Certifications</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].certificationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].certificationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].certificationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].certificationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].certificationIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].certificationIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].certificationIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].certificationIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Projects</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].projectIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].projectIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].projectIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].projectIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].projectIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].projectIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].projectIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].projectIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Skills</td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[0].skillIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[0].skillIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[0].skillIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[0].skillIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                            <td style="text-align: left">
                                <div class="row rating-desc">
                                    <span class="glyphicon glyphicon-star"></span>{{compobjects[1].skillIndex + 1}}                           
                                        <div class="progress progress-striped" style="width: 150px">
                                            <div class="progress-bar progress-bar-{{getProgress(compobjects[1].skillIndex)}}" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100" style="width: {{getWidth(compobjects[1].skillIndex)}}%">
                                                <span class="sr-only">{{getWidth(compobjects[1].skillIndex)}}%</span>
                                            </div>
                                        </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>
